<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>雇主已发布的需求</title>
    <header th:replace="header::html"></header>
</head>
<body>
<span>欢迎查看您所发布的需求！！！</span>
<!-- 增加搜索条件 -->
<div class="demoTable">
    搜索需求标题：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="startDate" placeholder="请选择开始日期"
                   name="startDate">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="endDate" placeholder="请选择结束日期" name="endDate">
        </div>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="checkDetails">查看详情</a>
    {{#  if(d.tips3 == "1"&&d.nstate=="未中标"){ }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="confirm-service-provider" >确认服务商</a>
    {{#  } else { }}
    {{#  }}}
</script>

</body>
<script>
	layui.use('laydate', function () {
		var laydate = layui.laydate;
		//选中后的回调
		laydate.render({
			elem: '#startDate'
			, done: function (value, date) {
			}
		});

		laydate.render({
			elem: '#endDate'
			, done: function (value, date) {
			}
		});
	});

	layui.use('table', function () {
		var table = layui.table;

		//第一个实例
		table.render({
			elem: '#demo'
			, url: '/api-front/frontneed/list' //数据接口
			, page: true //开启分页
			, limits: [5]
			, limit: 6
			, cols: [
				[ //表头
                  {title:'ID',type:'numbers', align: 'center', width: "8%"}
				, {field: 'nid', title: 'ID', align: 'center', sort: true,hide:true}
				, {field: 'tips3', title: 'UID2', align: 'center',hide:true}
				, {field: 'ntitle', title: '需求标题', align: 'center', width: "14%"}
				, {field: 'nmoney', title: '佣金', align: 'center', sort: true, width: "10%"}
				, {field: 'nstarttime', title: '发布时间', align: 'center', width: "15%"}
				, {field: 'nendtime', title: '结束时间', align: 'center', width: "15%"}
			    , {field: 'nrealtime', title: '工期', align: 'center', width: "8%"}
					, {field: 'nstate', title: '状态', align: 'center', width: "7%"}
					, {toolbar: "#bar", title: '操作', width: "25%",align: 'center'}

			]
            ]
		});
		//监听工具条
		table.on('tool(test)', function (obj) {

			var data = obj.data;//获取点击行数据
			if (obj.event ==='checkDetails') {
				xadmin.open('需求详情页面', '/api-front/frontneed/guoneedverify/?nid=' + data.nid);

			}else{


				xadmin.open('确认服务商页面', '/api-front/frontneed/confirmServer/?nid=' +data.nid);

			}
		});



		$('.demoTable .layui-btn').on('click', function () {
			if ($("#startDate").val()>$("#endDate").val()) {
				layer.msg("您的日期不正确，请重新输入！",{icon:2});
            }else{
				var type = $(this).data('type');
				if (type == 'reload') {
					//执行重载
					table.reload('demo', {
						page: {
							curr: 1 //重新从第 1 页开始
						}
						, where: {
							ntitle: $("#demoReload").val(),
							startDate: $("#startDate").val(),
							endDate: $("#endDate").val()

						}
					});

				}
            }

		});

	});


</script>
</html>